<template>
	<div class="popup-image">
		<div class="popup-image-item" v-for="(item, index) in datas.list" :key="index" :style="baseStyle(index)">
			<div class="sd-image sd-flex" style="border-radius: 4px">
				<el-image :src="STATIC_URL + item.src" fit="contain">
					<template #error>
						<div>
							<span class="icon my-icon icon-tupianzhanshi"></span>
						</div>
					</template>
				</el-image>
			</div>
		</div>
		<!-- <slot name="deles" /> -->
	</div>
</template>

<script setup name="popupad">
import { ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';

let props = defineProps({
	datas: {},
});

let baseStyle = (index) => {
	return {
		'margin-right': -166 - 20 * index + 'px',
		'margin-bottom': -247 - 20 * index + 'px',
		'z-index': 200 - index,
	};
};
</script>

<style scoped lang="scss">
.popup-image {
	width: 100%;
	height: 100%;
	// background: rgb(153, 153, 153);
	position: absolute;
}

.popup-image .popup-image-item {
	width: 292px;
	height: 454px;
	position: absolute;
	right: 50%;
	bottom: 50%;
	margin-right: -146px;
	margin-bottom: -227px;
	border: 1px solid #d9d9d9;
	background: #fff;
	border-radius: 4px;
}

.popup-image-item .sd-image {
	height: 100%;
	width: 100%;
}

.sd-image .el-image {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
